<template>
  <div class="app-container pagination">
    <el-card>
      <div class="header">
        <el-input v-model="search['name']" placeholder="请输入车型名称" class="search-input"/>
        <el-button type="primary" icon="el-icon-search" @click="()=>pagination['load']()">搜索</el-button>
        <el-button type="warning" icon="el-icon-printer" @click="showDialog">添加车辆</el-button>
      </div>
      <ws-pagination v-model="pagination">
        <el-table-column prop="id" label="车型ID" min-width="150" header-align="center" align="center"/>
        <el-table-column prop="name" label="车型名称" min-width="150" header-align="center" align="center"/>
        <el-table-column prop="price" label="日均价" min-width="120" header-align="center" align="center"/>
        <el-table-column prop="stock" label="车辆数量" min-width="120" header-align="center" align="center"/>
        <el-table-column prop="overStock" label="剩余车辆" min-width="240" header-align="center" align="center"/>
        <el-table-column label="状态" width="120" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <div @click="changeStatus(scope.row)">
              <el-tag :type="scope.row.status===2?'danger':'success'">{{ scope.row.status===2?'已禁用':'已启用' }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <!--编辑-->
            <el-button size="small" type="info" icon="el-icon-edit" circle @click="showDialog(scope.row)"/>
            <!--删除-->
            <el-button size="small" type="danger" icon="el-icon-delete" circle @click="deleteRow(scope['row'])"/>
          </template>
        </el-table-column>
      </ws-pagination>
    </el-card>
    <el-dialog :visible.sync="carDialogVisible" title="运营车型" width="560px" class="dialog" center>
      <el-form label-width="150px">
        <el-form-item label="车型选择">
          <el-select v-model="carForm['carTypeId']" placeholder="车型选择" @change="loadCarList">
            <el-option v-for="item in carTypeList" :key="item.id" :value="item['id']" :label="item['name']"/>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆选择">
          <el-select v-model="carForm['carId']" placeholder="车辆选择" @change="loadCarNumberList">
            <el-option v-for="item in carList" :key="item.id" :value="item['id']" :label="item['name']"/>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="车辆数量">
          <el-input-number v-model="carForm['stock']"/>
        </el-form-item>-->
        <el-form-item label="车辆数量">
          <el-select v-model="carForm['plateNumber']" multiple placeholder="请选择指定车牌车辆">
            <el-option
              v-for="item in carNumberList"
              :key="item.id"
              :label="item.plateNumber"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="日均价">
          <el-input-number v-model="carForm['price']" min="0"/>
        </el-form-item>
        <el-form-item label="日租价">
          <el-row>
            <el-tag type="info">周一</el-tag>
            <el-input-number v-model="carForm['weekPrice'][1]" size="small" min="0"/>
          </el-row>
          <el-row>
            <el-tag type="info">周二</el-tag>
            <el-input-number v-model="carForm['weekPrice'][2]" size="small" min="0"/>
          </el-row>
          <el-row>
            <el-tag type="info">周三</el-tag>
            <el-input-number v-model="carForm['weekPrice'][3]" size="small" min="0"/>
          </el-row>
          <el-row>
            <el-tag type="info">周四</el-tag>
            <el-input-number v-model="carForm['weekPrice'][4]" size="small" min="0"/>
          </el-row>
          <el-row>
            <el-tag type="info">周五</el-tag>
            <el-input-number v-model="carForm['weekPrice'][5]" size="small" min="0"/>
          </el-row>
          <el-row>
            <el-tag type="info">周六</el-tag>
            <el-input-number v-model="carForm['weekPrice'][6]" size="small" min="0"/>
          </el-row>
          <el-row>
            <el-tag type="info">周日</el-tag>
            <el-input-number v-model="carForm['weekPrice'][0]" size="small" min="0"/>
          </el-row>
        </el-form-item>
        <el-form-item label="特殊日期费用">
          <el-row v-for="(item,index) in carForm['specialPrice']" :key="index">
            <el-date-picker v-model="item['date']" type="date" size="small" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 136px;"/>
            <el-input-number v-model="item['price']" size="small" min="0"/>
            <el-button v-if="index+1!==carForm['specialPrice'].length" type="danger" icon="el-icon-minus" size="mini" circle @click="carForm['specialPrice'].splice(index,1)"/>
            <el-button v-if="index+1===carForm['specialPrice'].length" type="primary" icon="el-icon-plus" size="mini" circle @click="carForm['specialPrice'].push({})"/>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="carDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRentCarBranchCar">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'RentCarBranchList',
    components: {},
    data() {
      return {
        search: {
          outletId: '',
          name: ''
        },
        pagination: {},
        // 车辆类型列表
        carTypeList: [],
        // 选择的车辆类型
        carType: '',
        // 车牌列表
        carNumberList: '',
        // 车辆列表
        carList: [],
        // 车辆弹窗
        carDialogVisible: false,
        carForm: {
          // 车辆类型
          carTypeId: '',
          carId: '',
          price: [],
          weekPrice: [0, 0, 0, 0, 0, 0, 0],
          specialPrice: [{
            date: '',
            price: ''
          }],
          // stock: ''
          plateNumber: []
        }
      }
    },
    watch: {},
    mounted(){
      this.search['outletId'] = this.$router.currentRoute.query['id'] || '';
      // 初始化分页器
      this.initPagination();
      this.loadCarTypeList();
    },
    methods: {
      // 初始化分页器
      initPagination() {
        // 创建分页器
        this.pagination = new this.$pagination(async (...args) => {
          // 加载分页列表
          const result = await this.$service.applicationGetRentCarBranchCarList({
            ...args[0],
            outletId: this.search.outletId,
            name: this.search.name
          });
          if (result.code !== 0) {
            return this.$message.error(result.msg || '系统错误');
          }
          return result;
        });
        // 加载分页数据
        this.pagination.load();
      },

      // 加载车辆类型列表
      loadCarTypeList(){
        (async () => {
          const result = await this.$service.applicationGetAllCarType();
          if (result.code === 0) {
            this.carTypeList = result.data;
          }
        })();
      },

      // 加载车辆列表
      loadCarList(){
        (async () => {
          const result = await this.$service.applicationGetCarListByCarType({type: this.carForm.carTypeId});
          if (result.code === 0) {
            this.carList = result.data;
          }
        })();
      },

      // 加载车牌列表
      loadCarNumberList() {
        (async () => {
          const result = await this.$service.applicationGetCarNumberListByCar({
            id: this.carForm.carId,
            chooseId: this.carForm.id,
            type: 5
          });
          if (result.code === 0) {
            this.carNumberList = result.data;
          }
        })();
      },

      // 显示弹窗
      showDialog(row) {
        if (row.id) {
          Object.assign(this.carForm, row);
          this.loadCarList();
          this.loadCarNumberList();
        } else {
          this.carForm = {
            // 车辆类型
            carTypeId: '',
            carId: '',
            price: [],
            weekPrice: [0, 0, 0, 0, 0, 0, 0],
            specialPrice: [{
              date: '',
              price: ''
            }],
            // stock: ''
            plateNumber: []
          }
        }
        this.carDialogVisible = true;
      },

      submitRentCarBranchCar() {
        (async () => {
          const data = Object.assign({}, this.carForm);
          data.outletId = this.search.outletId;
          data.specialPrice = JSON.stringify(data.specialPrice);
          let result = null;
          if (!this.carForm.id) {
            result = await this.$service.applicationAddRentCarBranchCar(data);
          } else {
            result = await this.$service.applicationModifyRentCarBranchCar(data);
          }
          if (result.code === 0) {
            this.$message.success(`添加成功~`);
            // 加载分页数据
            this.pagination.load();
            this.carDialogVisible = false;
          } else {
            this.$message.error(result.msg);
          }
        })();
      },

      // 删除指定行
      deleteRow({id}) {
        this.$confirm('此操作将删除该车辆, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              const result = await this.$service.applicationDeleteRentCarBranchCar({id: id});
              if (result.code === 0) {
                this.$message.success(`删除成功~`);
                // 加载分页数据
                this.pagination.load();
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      },
      // 切换上下架状态
      changeStatus({id, status}) {
        this.$confirm(`您确定要${status === 1 ? '禁用' : '启用'}该车辆吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              const result = await this.$service.applicationRentCarBranchCarChangeStatus({id: id});
              if (result.code === 0) {
                this.$message.success(`${status === 1 ? '禁用' : '启用'}成功~`);
                // 加载分页数据
                this.pagination.load();
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      }
    }
  }
</script>
